<template>  
    <div>  
      <input type="file" @change="onVideoChange" accept="video/*" />  
      <input type="file" @change="onImageChange" accept="image/*" />  
      <button @click="uploadVideo">上传视频</button>  
      <p>{{ message }}</p>  
    </div>  
  </template>  
    
  <script>  
  import api from '@/api';
import axios from 'axios';  
  
  export default {  
    data() {  
      return {  
        videoFile: null,  
        imageFile: null,  
        videoName: '',  
        authorName: 'Your Name', // 你可以添加一个输入框来让用户输入作者名  
        authorUUID: 'your-uuid', // 这通常是从用户认证信息中获取的  
        tags: ['tag1', 'tag2'], // 你可以添加一个输入框或选择框来让用户输入标签  
        message: ''  
      };  
    },  
    methods: {  
      onVideoChange(event) {  
        this.videoFile = event.target.files[0];  
      },  
      onImageChange(event) {  
        this.imageFile = event.target.files[0];  
      },  
      async uploadVideo() {  
        if (!this.videoFile || !this.imageFile) {  
          this.message = '请选择一个视频和图片文件。';  
          return;  
        }  
    
        const formData = new FormData();  
        console.log(this.videoFile)
        
        formData.append('videoFile', this.videoFile);  
        formData.append('imageFile', this.imageFile);  
        // formData.append('videoName', this.videoName || this.videoFile.name);  
        // formData.append('authorName', this.authorName);  
        // formData.append('authorUUID', this.authorUUID);  
        // 注意：这里假设你的后端能够处理字符串形式的标签数组，  
        // 否则你需要将它们转换成后端期望的格式（例如，每个标签作为单独的字段）。  
        // formData.append('tags', JSON.stringify(this.tags));  
    
        try {
          let f = new FormData()
          f.append("k1","v1") 
          f.append("k2","v2")
          formData.forEach((value, key) => {  
            console.log(key + ': ' + value);  
          }); 
          const response = await api.UploadVideo(formData)
        //   const response = await axios.post('http://localhost:8888/video/upload',this.videoFile,this.imageFile, formData,{  
        //   headers: {  
        //     'Content-Type': 'multipart/form-data'  
        //   }  
        // });  
    
          this.message = response.data.message; // 假设后端返回了一个包含消息的对象  
        } catch (error) {  
          console.error('上传失败：', error);  
          this.message = '上传失败，请稍后再试。';  
        }  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  /* 添加一些样式以使界面更友好 */  
  input {  
    margin: 10px;  
  }  
  button {  
    margin-top: 20px;  
  }  
  </style>